import Vue from 'vue'
import VueRouter from 'vue-router'
import store from "@/store";

Vue.use(VueRouter)

const routes = [
  {
    path: '/login',
    name: 'Login',
    component: () => import('../views/Login.vue')
  },
  {
    path: '/register',
    name: 'Register',
    component: () => import('../views/Register.vue')
  },
  {
    path: '/404',
    name: '404',
    component: () => import('../views/404.vue')
  },
  {
    path: '/front',
    name: 'Front',
    component: () => import('../views/front/Front'),
    children: [
      {
        path: 'home',
        name: 'FrontHome',
        component: () => import('../views/front/Home.vue')
      },
      {
        path: 'face',
        name: 'Face',
        component: () => import('../views/front/FaceRegister.vue')
      },
      {
        path: 'password',
        name: 'Password',
        component: () => import('../views/front/Password.vue')
      },
      {
        path: 'person',
        name: 'Person',
        component: () => import('../views/front/Person.vue')
      },
      {
        path: 'paper',
        name: 'Paper',
        component: () => import('../views/front/Paper.vue')
      }
    ]
  }
]

const router = new VueRouter({
  mode: 'history',
  routes
})

// Reset the router
export const resetRouter = () => {
  router.matcher = new VueRouter({
    mode: 'history',
    routes
  })
}

// Note: Refreshing the page will reset the page routing
export const setRoutes = () => {
  const storeMenus = localStorage.getItem("menus");
  if (storeMenus) {
    // Assemble dynamic routes
    const manageRoute = {
      path: '/', name: 'Manage', component: () => import('../views/Manage.vue'), redirect: "/home", children: [
        {path: 'person', name: 'Personal Information', component: () => import('../views/Person.vue')},
        {path: 'password', name: 'Change Password', component: () => import('../views/Password.vue')},
        {path: 'handlePaper', name: 'Review Paper', component: () => import('../views/HandlePaper.vue')},
      ]
    }
    const menus = JSON.parse(storeMenus)
    menus.forEach(item => {
      if (item.path) {  // Only set the route when the path is not empty
        let itemMenu = {
          path: item.path.replace("/", ""),
          name: item.name,
          component: () => import('../views/' + item.pagePath + '.vue')
        }
        manageRoute.children.push(itemMenu)
      } else if (item.children.length) {
        item.children.forEach(item => {
          if (item.path) {
            let itemMenu = {
              path: item.path.replace("/", ""),
              name: item.name,
              component: () => import('../views/' + item.pagePath + '.vue')
            }
            manageRoute.children.push(itemMenu)
          }
        })
      }
    })

    // Get the current route object name array
    const currentRouteNames = router.getRoutes().map(v => v.name)
    if (!currentRouteNames.includes('Manage')) {
      // Dynamically add to the current route object
      router.addRoute(manageRoute)
    }
  }
}

// The route needs to be reset every time the page is refreshed, otherwise it will be reset
setRoutes()

router.beforeEach((to, from, next) => {
  localStorage.setItem("currentPathName", to.name)  // Set the current route name
  store.commit("setPath")
  if (!to.matched.length) {
    const menus = localStorage.getItem("menus")
    if (!menus) {
      next("/login")
    } else {
      next("/404")
    }
  } else {
    next()
  }
})

export default router
